<template>
  <view
    class="wrapper"
    :style="specialStyle"
    @touchstart="$emit('closeBubble')"
  >
    <view class="majorFilterContainer">
      <!-- <view class="firstListContainer">
        <u-tabs
          :list="majorFirstList"
          bg-color="transparent"
          :height="100"
          inactive-color="#222"
          active-color="#222"
          :bar-style="{ display: 'none' }"
          name="tagName"
          :is-scroll="true"
          :current="selectedFirstIndex"
          @change="handleFirstItemClick"
          :gutter="28"
          :active-item-style="tabActiveStyle"
        >
        </u-tabs>
      </view> -->
      <view class="filter-box">
        <view
          v-if="!hideFilters"
          class="matching-degree"
          @click="showPicker('showMatchingDegree')"
        >
          {{ currentMatchingDegree }}</view
        >
        <view
          v-if="!hideFilters"
          class="education-background"
          @click="showPicker('showEducationBackground')"
        >
          {{ currentEducationBackground }}</view
        >
        <view class="search-major" :class="{ expanded: hideFilters }">
          <img :src="fdj" class="fdj" />
          <input
            type="text"
            v-model="matchName"
            placeholder="查专业"
            @focus="handleFocus"
            @blur="handleBlur"
          />
        </view>
      </view>
      <view class="mainListContainer" v-if="majorFirstList.length > 0">
        <scroll-view
          :scroll-y="true"
          :scroll-top="scrollSecondTop"
          scroll-with-animation
          class="secondPositionList"
        >
          <view
            :class="{
              SecondPositionItem: true,
              'u-line-2': true,
              selectedSecond: item.positionTagId == selectedSecondId
            }"
            v-for="(item, index) in majorFirstList"
            :key="index"
            @click="handleSecondItemClick(item, index)"
          >
            <span v-if="item.tagName == '热门'" class="hotSecondPosition">
              <img
                src="//img3.job1001.com/ypMp/elan/images/career/hotSecondPosition.png"
              />
              {{ item.name }}</span
            >
            <view v-else class="firstCategory"
              >{{ item.name }}
              <view
                >匹配率 <span>{{ item.score }}%</span></view
              >
            </view>
          </view>
        </scroll-view>
        <scroll-view
          :scroll-y="true"
          scroll-with-animation
          class="thirdPositionList"
          :scroll-into-view="scollThirdToView"
          @scroll.native="handleScroll"
          ref="scollView"
        >
          <view
            class="ThirdPositionItem"
            v-for="(item, index) in majorFirstList"
            :key="index"
            :id="`third-${index}`"
          >
            <view :class="{ majorCategory: true, fixedTitle: item.isFixTitle }">
              <span>{{ item.name }}专业类别</span>
              <span class="titleDesc">专业匹配率</span>
            </view>
            <view class="thirdChildrenList">
              <view v-for="(_item, _index) in item.children" :key="_index">
                <view
                  class="thirdTop"
                  @click="showMajor(item, index, _item, _index)"
                >
                  <view
                    >{{ _item.name }}
                    <text class="titleTip"
                      >({{ _item.children.length || '0' }}个)</text
                    >
                  </view>
                  <view class="right-result">
                    <view class="circle-progress">{{ _item.score }}%</view>
                  </view>
                </view>
                <view
                  v-if="_index != item.children.length - 1"
                  class="line"
                ></view>
                <view v-if="_item.showChildren">
                  <view
                    class="thirdChildrenItem"
                    v-for="(__item, __index) in _item.children"
                    :key="__index"
                    @click="
                      handleThirdItemClick(_item, __item, subjectCombination)
                    "
                  >
                    <view
                      :class="
                        __index == _item.children.length - 1
                          ? 'fourthItem'
                          : 'fourthItem-no-bottom'
                      "
                    >
                      <view class="fourth-left">
                        <view>{{ __item.name }}</view>
                        <view>匹配率 {{ __item.score }}%</view>
                      </view>
                      <view class="fourth-right"></view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <Empty
        v-else
        :baseImg="emptyImg"
        text="暂无数据"
        :fontWeight="400"
        textColor="#bfbfbf"
        class="empty"
        spacing="0"
      />
    </view>
    <u-picker
      mode="selector"
      v-model="showMatchingDegree"
      :range="matchingDegreeSelector"
      range-key="cateName"
      @confirm="handleMatchingDegreeConfirm($event, item)"
      z-index="99999"
    ></u-picker>
    <u-picker
      mode="selector"
      v-model="showEducationBackground"
      :range="educationBackgroundSelector"
      range-key="cateName"
      @confirm="handleEducationBackgroundConfirm($event, item)"
      z-index="99999"
    ></u-picker>
  </view>
</template>

<script>
import { getAllProfession } from '@/api/modules/gk';

import { getPositionTagList, getPositionTagTree } from '@/api/modules/major';
import Empty from '@/components/Empty.vue';
export default {
  name: 'majorFilterList',
  props: {
    cateType: {
      type: String,
      default: '30'
    },
    specialStyle: {
      type: Object,
      default: () => {}
    },
    subjectCombination: {
      type: String,
      default: ''
    },
    currentSubject: {
      type: String,
      default: ''
    },
    showChooseSubjectPopup: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Empty
  },
  watch: {
    // 监听 subjectCombination 的变化
    // subjectCombination(newVal, oldVal) {
    //   if (newVal !== oldVal) {
    //     debugger;
    //     this.getAllProfessionFn();
    //   }
    // },
    subjectCombination: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.getAllProfessionFn();
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      fdj: '//img3.job1001.com/ypMp/elan/images/saas/fdj.png',
      hideFilters: false, // 控制筛选条件的显示
      emptyImg: this.$imgBaseSelf + 'common/empty.png',
      currentMatchingDegree: '匹配程度',
      currentMatchingDegreeValue: '',
      currentEducationBackground: '本科',
      currentEducationBackgroundValue: '30',
      matchName: '',
      showMatchingDegree: false,
      showEducationBackground: false,
      matchingDegreeSelector: [
        {
          cateName: '全部',
          id: ''
        },
        {
          cateName: '低',
          id: '10'
        },
        {
          cateName: '中',
          id: '20'
        },
        {
          cateName: '高',
          id: '30'
        }
      ],
      educationBackgroundSelector: [
        {
          cateName: '专科',
          id: '10'
        },
        {
          cateName: '本科',
          id: '30'
        }
      ],
      majorFirstList: [],
      secondPositionList: [],
      ThirdPositionList: [],
      selectedFirstId: '', //第一层选中的id
      selectedFirstName: '', //第一层选中的名字
      selectedFirstIndex: '', //第一层选中的下标
      scollFirstToView: '', //控制第一层筛选容器滚动的变量
      selectedSecondId: '', //第二层选中的id
      selectedSecondIndex: 0, //第二层选中的下标
      scrollSecondTop: 0, //第二层的滚动高度
      scollThirdToView: '', //控制第三层筛选容器滚动的变量
      distance: 0,
      isClickTab: false, //是否是点击滚动
      secondHeightArr: [], //第二层每一个专业的高度
      heightArr: [], //第三层每一个二级专业的高度
      tabActiveStyle: {
        'justify-content': 'center',
        'align-items': 'center',
        border: '4rpx solid #f75a3e',
        background: 'linear-gradient(180deg, #ffece9 0%, #ffffff 100%)',
        'border-radius': '12rpx',
        'line-height': '98rpx'
      },
      buryingPointId: '',
      cardType: ''
    };
  },
  methods: {
    handleFocus() {
      this.hideFilters = true; // 隐藏左侧筛选条件
      // 添加宽度变化的过渡动画
      // 你可以在这里调整动画效果
    },
    handleBlur() {
      this.hideFilters = false; // 显示左侧筛选条件
      this.getAllProfessionFn();
      // 可以添加一些延迟来平滑过渡
      // setTimeout(() => {
      //   this.hideFilters = false;
      // }, 300);
    },
    async getAllProfessionFn() {
      const params = {
        cpType: this.currentEducationBackgroundValue,
        matchName: this.matchName,
        matchDegree: this.currentMatchingDegreeValue,
        // subjectCombination: this.subjectCombination,
        subjectCombination: this.subjectCombination
      };
      console.log('params.subjectCombination', params.subjectCombination);
      const res = await getAllProfession(params);
      if (res.code == 200) {
        console.log('res', res);
        res.data.forEach((item, index) => {
          item.children.forEach((_item, _index) => {
            // 确保每个对象都有 showChildren 属性
            return { ..._item, showChildren: false };
          });
        });
        this.majorFirstList = res.data || [];
        this.majorFirstList.forEach((item, index) => {
          item.children.forEach((_item, _index) => {
            // 确保每个对象都有 showChildren 属性
            return { ..._item, showChildren: false };
          });
        });
        this.selectedSecondId = res.data[0].positionTagId;
        this.selectedFirstName = res.data[0].name;
        // this.reqGetPositionTagTree(res.data[0].positionTagId);

        this.scollFirstToView = ''; //需要先重置一下
        setTimeout(() => {
          this.scollFirstToView = 'first-0'; //重置一下第三层滚动
        });
        this.cacSecondHeight();
        this.cacHeight();
        this.selectedSecondIndex = 0;
        this.isClickTab = true;
        setTimeout(() => {
          this.isClickTab = false;
        }, 300);
        this.scollThirdToView = ''; //需要先重置一下
        setTimeout(() => {
          this.scollThirdToView = 'third-0'; //重置一下第三层滚动
          this.$set(
            this.secondPositionList[this.selectedSecondIndex],
            'isFixTitle',
            true
          );
        });
      }
    },
    handleMatchingDegreeConfirm(e, item) {
      // e[0]就是索引
      this.currentMatchingDegree = this.matchingDegreeSelector[e[0]].cateName;
      this.currentMatchingDegreeValue = this.matchingDegreeSelector[e[0]].id;
      this.getAllProfessionFn();
    },
    handleEducationBackgroundConfirm(e, item) {
      // e[0]就是索引
      this.currentEducationBackground =
        this.educationBackgroundSelector[e[0]].cateName;
      this.currentEducationBackgroundValue =
        this.educationBackgroundSelector[e[0]].id;
      this.$emit('changeCptype', this.currentEducationBackgroundValue);

      this.getAllProfessionFn();
    },
    showPicker(params) {
      switch (params) {
        case 'showMatchingDegree':
          this.showMatchingDegree = true;
          break;
        case 'showEducationBackground':
          this.showEducationBackground = true;
          break;
        default:
          break;
      }
    },
    // 展开收起最后一层专业
    showMajor(item, index, _item, _index) {
      this.$set(
        this.majorFirstList[index].children[_index],
        'showChildren',
        !this.majorFirstList[index].children[_index].showChildren
      );
    },
    //专科本科改变将index设为0
    currentIndexZero() {
      this.selectedFirstIndex = 0;
    },
    //获取第一层
    reqGetPositionTagList() {
      getPositionTagList({
        tagLevel: '1',
        tagType: '10',
        cateType: this.cateType
      })
        .then((res) => {
          if (res.code == 200) {
            this.majorFirstList = res.data || [];
            this.selectedSecondId = res.data[0].positionTagId;
            if (res.data.length) {
              this.selectedFirstId = res.data[0].positionTagId;
              this.selectedFirstName = res.data[0].tagName;
              this.reqGetPositionTagTree(res.data[0].positionTagId);
              this.scollFirstToView = ''; //需要先重置一下
              setTimeout(() => {
                this.scollFirstToView = 'first-0'; //重置一下第三层滚动
              });
            }
          }
        })
        .catch((err) => {});
    },
    //获取第二层
    reqGetPositionTagTree(positionTagId) {
      //根据一级专业Id获取二级和三级列表，每次tab点击都会调用
      getPositionTagTree({
        positionTagId: positionTagId,
        tagType: '10',
        cateType: this.cateType,
        searchRecommendType: 10
      })
        .then((res) => {
          if (res.code == 200) {
            res.data.splice(0, 1);
            this.secondPositionList = res.data || [];
            this.secondPositionList = res.data.map((item) => {
              // 确保每个对象都有 showChildren 属性
              return { ...item, showChildren: false, percent: 60.07 };
            });
            // this.selectedSecondId = res.data[0].positionTagId;
            this.cacSecondHeight();
            this.cacHeight();
            this.selectedSecondIndex = 0;
            this.isClickTab = true;
            setTimeout(() => {
              this.isClickTab = false;
            }, 300);
            this.scollThirdToView = ''; //需要先重置一下
            setTimeout(() => {
              this.scollThirdToView = 'third-0'; //重置一下第三层滚动
              this.$set(
                this.secondPositionList[this.selectedSecondIndex],
                'isFixTitle',
                true
              );
            });
          }
        })
        .catch((err) => {});
    },
    handleFirstItemClick(index) {
      this.selectedFirstId = '';
      const item = this.majorFirstList[index];
      this.selectedFirstId = item.positionTagId;
      this.selectedFirstName = item.tagName;
      this.selectedFirstIndex = index;
      this.scollFirstToView = 'first-' + index;
      this.reqGetPositionTagTree(item.positionTagId);
    },
    handleSecondItemClick(item, index) {
      if (this.isClickTab) return;
      this.isClickTab = true;
      setTimeout(() => {
        this.isClickTab = false;
      }, 500);
      this.selectedSecondId = item.positionTagId;
      this.selectedSecondIndex = index;
      this.scollThirdToView = '';
      this.$nextTick(() => {
        this.scollThirdToView = 'third-' + index;
      });
    },
    handleThirdItemClick(item, _item) {
      console.log('item', item);
      // 这里点击跳转到职业职业详情
      let pageName = '专业搜索列表页';
      // let params = {
      //   positionOrMajor: 1,
      //   levelNum: 3,
      //   tagName: _item.tagName,
      //   positionTagId: _item.positionTagId,
      //   advertise: true,
      //   pageName
      // };
      // getApp().globalData.allCategoryParams = params;
      // uni.switchTab({
      //   url: "/pages/career/positionDictionary/allCategory",
      // });
      // 序列化对象为查询字符串
      let tempInfo = {
        ..._item,
        subjectCombination: this.subjectCombination,
        currentSubject: this.currentSubject.replace(/、/g, ','),
        secondName: item.name
      };
      const positionInfo = Object.keys(tempInfo)
        .map(
          (key) =>
            `${encodeURIComponent(key)}=${encodeURIComponent(tempInfo[key])}`
        )
        .join('&');
      uni.navigateTo({
        url: `/pagesSub/nationalCollegeEntranceExamination/majorDetail/index?${positionInfo}`
      });
      console.log('这里发生即将发生跳转', _item.positionTagId);
    },
    handleScroll(e) {
      if (this.isClickTab) return;
      this.$emit('closeBubble');
      let scrollTop = e.detail.scrollTop; //获取距离顶部的距离;
      //现在的item的高度
      const nowHeight = this.heightArr[this.selectedSecondIndex];
      //上一个的高度
      const preHiehgt = this.heightArr[this.selectedSecondIndex - 1];
      //处理第三层的滚动
      if (scrollTop > nowHeight) {
        // this.selectedSecondId =
        //   this.secondPositionList[this.selectedSecondIndex + 1].positionTagId;
        this.selectedSecondId =
          this.majorFirstList[this.selectedSecondIndex + 1].positionTagId;
        this.selectedSecondIndex += 1;
        //如果滚动到顶部以后了，那就得固定一下title
        this.$set(
          this.majorFirstList[this.selectedSecondIndex],
          'isFixTitle',
          true
        );
      } else if (scrollTop < preHiehgt) {
        if (this.majorFirstList[this.selectedSecondIndex - 1]) {
          // this.selectedSecondId =
          //   this.secondPositionList[this.selectedSecondIndex - 1].positionTagId;
          this.selectedSecondId =
            this.majorFirstList[this.selectedSecondIndex - 1].positionTagId;
          this.selectedSecondIndex -= 1;
          this.$set(
            this.majorFirstList[this.selectedSecondIndex],
            'isFixTitle',
            true
          );
        }
      }
      //处理二级跟随滚动
      this.scrollSecondTop =
        this.secondHeightArr[this.selectedSecondIndex] -
        parseInt(this.specialStyle.height.slice(0, -2) / 2);
    },
    cacHeight() {
      this.$nextTick(() => {
        let list = [];
        let height = 0;
        const query = uni.createSelectorQuery().in(this);
        query.selectAll('.ThirdPositionItem').boundingClientRect();
        query.exec((res) => {
          res[0].forEach((item) => {
            height += parseInt(item.height);
            list.push(height);
          });
          this.heightArr = list;
        });
      });
    },
    //计算二级的每个高度
    cacSecondHeight() {
      this.$nextTick(() => {
        let list = [];
        let height = 0;
        const query = uni.createSelectorQuery().in(this);
        query.selectAll('.SecondPositionItem').boundingClientRect();
        query.exec((res) => {
          res[0].forEach((item) => {
            height += parseInt(item.height);
            list.push(height);
          });
          this.secondHeightArr = list;
          console.log('secondHeightArr', this.secondHeightArr);
        });
      });
    }
  },
  created() {
    // this.reqGetPositionTagList();
    // this.getAllProfessionFn();
  }
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'AlimamaShuHeiTi-Bold';
  /*定义字体名称*/
  src: url('https://img3.job1001.com/ypMp/elan/images/saas/AlimamaShuHeiTi-Bold.ttf');
}
$img-base-person: $img-base + 'careerPath/';
.wrapper {
  width: 100vw;
  min-height: 400rpx;
  overflow: hidden;
  .majorFilterContainer {
    .firstListContainer {
      // display: flex;
      height: 100rpx;
      // padding: 0 32rpx;
      width: 100vw;
      margin-bottom: 38rpx;

      // white-space: nowrap; /* 禁止换行，很重要 */
      // overflow-x: hidden; /* 显示滚动条 */
      // scroll-snap-type: x mandatory; /* 开启滚动吸附 */
      .firstListItem {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        scroll-snap-align: center;
        /* 设置吸附位置 */
        height: 100rpx;
        padding: 0 28rpx;
        margin-right: 16rpx;
        border-radius: 12rpx;
        border: 2rpx solid #e4e5f5;
        background: linear-gradient(180deg, #ebf5fe 0%, #ffffff 100%);

        &.selectedFirst {
          border: 4rpx solid #f75a3e;
          background: linear-gradient(180deg, #ffece9 0%, #ffffff 100%);
        }

        &:last-of-type {
          margin-right: 0rpx;
        }
      }
    }
  }
  .filter-box {
    height: 110rpx;
    width: 100%;
    padding: 14rpx 32rpx 32rpx 32rpx;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    align-items: center;
    transition: padding 0.3s ease; // 添加过渡动画
    .matching-degree,
    .education-background {
      margin-right: 16rpx;
      width: 158rpx;
      height: 56rpx;
      background: #f6f6f6;
      border-radius: 12rpx;
      position: relative; /* 确保伪元素相对于这个元素定位 */
      display: inline-flex; /* 使元素适应内容 */
      flex-direction: row;
      align-items: center;
      padding: 4rpx 16rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #888888;
      transition: opacity 0.3s ease; // 添加过渡动画
      &::after {
        content: ''; /* 必须设置内容 */
        position: absolute; /* 绝对定位 */
        bottom: 20rpx; /* 底部对齐 */
        right: 16rpx; /* 右侧对齐 */
        width: 0; /* 宽度为0 */
        height: 0; /* 高度为0 */
        border-width: 10rpx; /* 三角形的大小 */
        border-style: solid; /* 边框样式 */
        border-color: transparent transparent transparent #c0c0c0; /* 三角形颜色，左下角为 #c0c0c0 */
        transform-origin: 0 100%; /* 设置旋转中心点 */
        transform: rotate(45deg); /* 沿 X 轴旋转 -45 度 */
      }
    }
    .search-major {
      width: 336rpx;
      height: 56rpx;
      background: #f6f6f6;
      border-radius: 12rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #888888;
      display: flex; /* 使元素适应内容 */
      flex-direction: row;
      align-items: center;
      padding: 4rpx 16rpx;
      transition: width 0.3s ease; // 添加过渡动画
      flex: 1; // 使用 Flex 布局
      .fdj {
        width: 32rpx;
        height: 32rpx;
        margin-right: 16rpx;
        flex-shrink: 0;
      }
      &.expanded {
        width: 100%;
      }
    }
  }
  .mainListContainer {
    display: flex;

    // justify-content: start;
    .secondPositionList {
      // display: flex;
      // flex-direction: column;

      // height: 1388rpx;
      height: 1060rpx;

      background-color: #f4f6f8;

      .SecondPositionItem {
        display: flex;
        // justify-content: center;
        align-items: center;
        // width: 212rpx;
        padding-left: 32rpx;
        height: 146rpx;
        background: #f4f6f8;
        color: #666666;
        // padding-top: 48rpx;

        span {
          // display: inline-flex;
          // justify-content: center;
          // align-items: center;
          text-align: left;
          max-width: 160rpx;
          font-size: 28rpx;
          // overflow: hidden;
          // white-space: nowrap;
          // text-overflow: ellipsis;
        }
        .firstCategory {
          display: flex;
          flex-direction: column;
          font-size: 28rpx;
          view {
            font-size: 24rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            span {
              color: #159f75;
              font-size: 24rpx;
            }
          }
        }
        .hotSecondPosition {
          display: inline-flex;
          justify-content: flex-start;
          align-items: center;

          img {
            width: 28rpx;
            height: 36rpx;
            margin-right: 14rpx;
          }
        }
      }

      .selectedSecond {
        position: relative;
        background: #ffffff;
        font-weight: bold;
        color: #222222;

        &::after {
          content: '';
          position: absolute;
          bottom: -30rpx;
          right: 0rpx;
          height: 30rpx;
          width: 30rpx;
          background-image: url($img-base + 'career/positionDictionary/radiuBorder.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }

        &::before {
          content: '';
          position: absolute;
          top: -30rpx;
          right: 0rpx;
          height: 30rpx;
          width: 30rpx;
          background-image: url($img-base + 'career/positionDictionary/topRadiuBorder.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }
    }

    .thirdPositionList {
      position: relative;
      height: 1108rpx;
      background-color: white;
      margin-left: -2rpx;
      padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));
      padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
      .ThirdPositionItem {
        display: flex;
        flex-direction: column;
        border-bottom: 10rpx solid #f4f6f7;
        width: 538rpx;
        padding-bottom: 24rpx;
        &:last-of-type {
          overflow: hidden;
          border-bottom: none;
          padding-bottom: 100rpx;
        }
        .majorCategory {
          display: flex;
          align-items: center;
          justify-content: space-between;
          align-items: center;
          height: 40rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 28rpx;
          color: #e07b66;
          padding: 32rpx;

          .titleDesc {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #999999;
            line-height: 17px;
            text-align: left;
            font-style: normal;
          }
        }
        .thirdTitle {
          display: flex;
          align-items: center;
          width: 538rpx;
          height: 100rpx;
          padding: 0rpx 32rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;

          .titleTip {
            font-size: 26rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #888888;
            line-height: 30rpx;
            padding-left: 16rpx;
          }
        }

        .fixedTitle {
          position: sticky;
          top: -36rpx;
          z-index: 2;
          background-color: white;
          height: 100rpx;
        }

        .thirdChildrenList {
          display: flex;
          flex-direction: column;
          .thirdTop {
            padding: 32rpx;
            height: 136rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 2rpx solid red;
            .right-result {
              .circle-progress {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100rpx;
                height: 100rpx;
                border-radius: 50%;
                color: #333333;
                font-family: 'AlimamaShuHeiTi-Bold';
                font-size: 26rpx;
                border: 8rpx solid #f7f7f7;
              }
            }
          }
          .line {
            height: 2rpx;
            background-color: #f5f5f5;
            width: 450rpx;
            margin: 0 auto;
          }
          .titleTip {
            font-size: 26rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #888888;
            line-height: 30rpx;
            padding-left: 16rpx;
          }
          .thirdChildrenItem {
            display: flex;
            flex-direction: column;
            // width: 538rpx;
            min-height: 124rpx;

            // padding: 24rpx 0;
            margin: 0 32rpx;
            // border-bottom: 1.2rpx solid #f5f5f5;//这里是分割线

            .thirdChildrenItemTitle {
              font-size: 28rpx;
              font-family: PingFangSC;
              font-weight: bold;
              color: #222222;
              line-height: 30rpx;
              margin-bottom: 16rpx;
            }

            .thirdChildrenItemTags {
              display: flex;

              .tagItem {
                display: flex;
                align-items: center;
                height: 30rpx;
                // line-height: 28rpx;
                font-size: 20rpx;
                padding: 0 6rpx;
                background: rgba(255, 119, 49, 0.05);
                border-radius: 6rpx;
                border: 1rpx solid #ff836c;
                color: #fa7259;
                margin-right: 16rpx;
              }
            }
            .fourthItem,
            .fourthItem-no-bottom {
              height: 140rpx;
              background: #f3faff;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #5689b0;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              padding: 26rpx 20rpx 30rpx 32rpx;

              .fourth-left {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 84rpx;
                font-size: 24rpx;
              }
              .fourth-right {
                width: 32rpx;
                height: 32rpx;
                background-image: url($img-base-person + 'gkxk/right-arrow.png');
                background-size: 100%;
              }
            }
            .fourthItem-no-bottom {
              border-bottom: 2rpx solid #dee9f0;
            }
          }
        }
      }
    }
  }
}
.empty {
  height: 450rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.u-tab-item {
  border: none;
  background: #f5f5f5;
}
</style>
